<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			#nav ul {
				zoom: 1;
				overflow: hidden;
				list-style: none;
				margin: 0;
				padding: 0;
				background: #eeeeee;
			}
			
			#nav li {
				float: left;
				width: 135px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				text-decoration: none;
			}
			
			#nav a {
				color: #333;
				text-decoration: none;
			}
			
			#nav a .en {
				display: none;
			}
			
			#nav a:hover {
				display: block;
				background: #dddddd;
				font-weight: 700;
				color: #222;
			}
			
			#nav a:hover .en {
				display: inline;
			}
			
			#nav a:hover .cn {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="nav">
				<ul>
					<li id="first">
						<a href="index.html"><span class="cn">首页</span><span class="en">Homepage</span></a>
					</li>


					<li>
						<a href="beijing.html"><span class="cn">个人简历</span><span class="en">个人简历</span></a>
					</li>
					<li>
						<a href="Baoposhizhong.html"><span class="cn">爆破时钟</span><span class="en">爆破时钟</span></a>
					</li>


					<li>
						<a href="free.html"><span class="cn">自由坠体</span><span class="en">自由坠体</span></a>
					</li>


					<li>
						<a href="huizhihuabu.html"><span class="cn">绘制画布</span><span class="en">绘制画布</span></a>
					</li>
					
					<li>
						<a href="manyballs.html"><span class="cn">缤纷小球</span><span class="en">缤纷小球</span></a>
					</li>
					
					<li>
						<a href="screen .html"><span class="cn">屏幕保护</span><span class="en">屏幕保护</span></a>
					</li>


					<li>
						<a href="TaiJi3.html"><span class="cn">运动太极</span><span class="en">运动太极</span></a>
					</li>
					
					<li>
						<a href="Tantiaoxiaoqiu.html"><span class="cn">弹跳小球</span><span class="en">弹跳小球</span></a>
					</li>
				</ul>
			</div>
		<canvas id="myCanvas"; width="1400"; height="750"></canvas>
		<script type="text/javascript">
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");
		var arcArr = [
			//[20,100,20,5,0,],
			//[20,100,20,10,0],
			//[20,100,20,10,5,"white"],
		];
		var r,g,b;
		setInterval(function(){
			
			for (var i = 0; i<30; i++){
				var vx = parseInt(Math.random()*5) + 1;
				if(Math.random()>0.5){
					vx = -vx;
				}
			        var vy = parseInt(Math.random()*5)+15;
			        r = parseInt(Math.random()*256)+5;
			        g = parseInt(Math.random()*256)+5;
			        b = parseInt(Math.random()*256)+5;
				  	arcArr.push([700,500,5,vx,-vy,"rgb(" + r +", " + g + ", "  + b +")"]);
				}
		},3000);
		
		setInterval(function(){
			ctx.fillStyle = "rgba(" + r +", " + g + ", "  + b +",0.5)";
			ctx.fillRect(0,0,1400,750);
			
			for(var i = 0; i < arcArr.length; i++){
			
			ctx.beginPath();
			ctx.fillStyle = arcArr[i][5];
			//var arcX = arcArr[0][0];
			//var arcY = arcArr[0][1];
			//var arcR = arcArr[0][2];
			//var arcVX = arcArr[0][3];
			//var arcVY = arcArr[0][4];
			ctx.arc(arcArr[i][0],arcArr[i][1],arcArr[i][2],0,2*Math.PI);
			ctx.fill();
			arcArr[i][0] = arcArr[i][0] + arcArr[i][3];
			arcArr[i][1] = arcArr[i][1] + arcArr[i][4];
			arcArr[i][2] = arcArr[i][2] - Math.random()*0.01;
			arcArr[i][4] = arcArr[i][4] + 0.5;
			if(arcArr[i][2]<Math.random()*2){
				arcArr.splice(i,1);
			}
			
			if(arcArr[i][1] > 750 - arcArr[i][2]){
				arcArr[i][4] = -arcArr[i][4];
				arcArr[i][4] = arcArr[i][4]*0.7;
				arcArr[i][1] = 750 - arcArr[i][2];
			}
			
			//if(arcArr[i][0] > 1400 - arcArr[i][2]){
				///arcArr[i][3] = -arcArr[i][3];
				//arcArr[i][0] = 1400 - arcArr[i][2];
			//}
			//if(arcArr[i][0] < arcArr[i][2]){
			//arcArr[i][3] = -arcArr[i][3];
				//arcArr[i][0] = arcArr[i][2];
			//}
			
		}	
		},16);
			
		</script>
	</body>
</html>
